﻿<link href="~/Content/styles/audio.css" rel="stylesheet" />
<link href="~/Content/styles/font-awesome.min.css" rel="stylesheet" />
<script src="~/Scripts/audio.js"></script>
<style>
</style> 
    <div class="audio-box" id="volet">
        <div class="audio-container">
            <div class="audio-view">
                <div class="audio-cover"></div>
                <div class="audio-body">
                    <h3 class="audio-title">未知歌曲</h3>
                    <div class="audio-backs">
                        <div class="audio-this-time">00:00</div>
                        <div class="audio-count-time">00:00</div>
                        <div class="audio-setbacks">
                            <i class="audio-this-setbacks">
                                <span class="audio-backs-btn"></span>
                            </i>
                            <span class="audio-cache-setbacks">
                            </span>
                        </div>
                    </div>
                </div>
                <div class="audio-btn">
                    <div class="audio-select">
                        <div action="prev" class="icon-fast-backward"></div>
                        <div action="play" data-on="icon-play" data-off="icon-pause" class="icon-play"></div>
                        <div action="next" class="icon-fast-forward"></div>
                        <!--<div action="menu" class="icon-list-alt"></div>-->
                        <div action="volume" class="icon-volume-up">
                            <div class="audio-set-volume">
                                <div class="volume-box">
                                    <i><span class="audio-backs-btn"></span></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>       
        <a href="#volet"  aria-hidden="true" class="ouvrir"><i class="el-icon el-icon-upload2"></i></a>
        <a href="#volet_clos" aria-hidden="true" class="fermer"><i class="el-icon el-icon-download"></i></a>
    </div>
      <ul class="tools">
          @*<li id="show">
              <i class="el-icon el-icon-headset" title="显示/隐藏播放器"></i>
          </li>*@
          <li><i class="el-icon el-icon-caret-top" title="回到顶部"></i></li>
      </ul>
<script>
    //$("#show").click(function () {
    //    $("#volet").toggle(1000)
    //})
</script>
<style >
    .tools {
        margin: 0;
        padding: 0;
        list-style: none;
        position: fixed;
        top: 87%;
        left: 90%;
        z-index: 88888;
    }
    .tools li {
        width: 40px;
        height: 40px;
        display: block;
        margin-bottom: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius:50%;
        text-align:center;
        font-size:22px;
        line-height:40px;
        cursor:pointer;
        color:#409eff;
        background:#fff;
        
    }
    .tools li:hover{
        background:#f2f6fc;
    }
    #volet_clos {
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
    }

    /* 初始定位 */
    #volet {
        position: fixed;
        left: 0px;
        bottom: -80px;
        height:80px;
        transition: all .5s ease-in;
    }

    #volet a.ouvrir, #volet a.fermer {
        position: absolute;
        right: -88px;
        top: 80px;
    }
    /* 点击过后改变 target  */
    #volet a.fermer {
        display: none;
    }

    #volet:target {
        left: 0px;
        bottom: 0px;
    }
    #volet:target a.fermer {
        display: block;
    }
    #volet:target a.ouvrir {
        display: none;
    }
    #volet_clos:target #volet {
        left: 0px;
        bottom: 0px;
    }
    #volet a.ouvrir, #volet a.fermer {
        position: absolute;
        right: calc(14%);
        top: -40px;
        padding: 10px 25px;
        background: #555;
        color: #fff;
        text-decoration: none;
        text-align: center;
        width: -1px;
        border-radius:20px 0 20px 0;
    }
</style>

